<template>
  <div class="billing-order-detail">
    <el-card>
      <div class="header">
        <div class="info">
          <span><b>单号:</b> {{detail.order_sn}}</span>
          <span><b>状态:</b> {{detail.status_name}}</span>
          <span v-if="detail.audit_user_id"><b>审核人:</b> {{detail.audit_user_name}}</span>
          <span v-if="detail.audit_remark"><b>审核备注:</b> {{detail.audit_remark}}</span>
        </div>
        <div class="buttonBox">
          <el-button class="button" @click="editBox(true)" v-if="(detail.status == Enum.StatusDraft || detail.status == Enum.StatusDisable) && user.user_id == detail.create_user_id">编辑</el-button>
          <el-button class="button" type="primary" @click="changeStatus(Enum.StatusWait)" v-if="(detail.status == Enum.StatusDraft || detail.status == Enum.StatusDisable) && user.user_id == detail.create_user_id">提交审核</el-button>
          <el-button class="button" type="primary" @click="changeStatus(Enum.StatusActive)" v-if="detail.status == Enum.StatusWait && user.user_id == detail.merchant_id">通过</el-button>
          <el-button class="button" type="warning" @click="changeStatus(Enum.StatusDisable)" v-if="detail.status == Enum.StatusWait">驳回</el-button>
        </div>
      </div>

      <el-descriptions  :column="3" label-class-name="dialogLabel" class="contentBox" :colon="false">
        <el-descriptions-item label="">{{detail.title}}</el-descriptions-item>
        <el-descriptions-item label="备注">{{detail.remark}}</el-descriptions-item>
        <el-descriptions-item label="结算金额">{{detail.amount}}</el-descriptions-item>

        <el-descriptions-item label="商家">{{detail.merchant_name}}</el-descriptions-item>
        <el-descriptions-item label="账期">{{detail.start_dt}} ~ {{detail.end_dt}}</el-descriptions-item>
        <el-descriptions-item label="结算方式">{{detail.pay_type_name}}</el-descriptions-item>

        <el-descriptions-item span="3"><!--分隔符--></el-descriptions-item>

        <el-descriptions-item label="订单支付数">{{detail.order_total_number}}</el-descriptions-item>
        <el-descriptions-item label="订单完成数">{{detail.order_finish_number}}</el-descriptions-item>
        <el-descriptions-item label="订单历史退款数">{{detail.order_refund_history_number}}</el-descriptions-item>

        <el-descriptions-item label="订单支付额">{{detail.order_total_amount}}</el-descriptions-item>
        <el-descriptions-item label="订单完成额">{{detail.order_finish_amount}}</el-descriptions-item>
        <el-descriptions-item label="订单历史退款额">{{detail.order_refund_history_amount}}</el-descriptions-item>

        <el-descriptions-item label="订单退款数">{{detail.order_refund_number}}</el-descriptions-item>
        <el-descriptions-item label="订单完成获利">{{detail.order_finish_profit}}</el-descriptions-item>
        <el-descriptions-item label="订单历史退款获利">{{detail.order_refund_history_profit}}</el-descriptions-item>

        <el-descriptions-item label="订单退款额">{{detail.order_refund_amount}}</el-descriptions-item>
        <el-descriptions-item label="订单完成已结">{{detail.order_refund_history_cleared}}</el-descriptions-item>
        <el-descriptions-item label="订单历史退款已结">{{detail.order_refund_history_cleared}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-drawer :visible.sync="edit.show" title="账单编辑" size="70%" :modal="false" custom-class="drawerWidth" destroy-on-close>
      <el-form :inline="true" :model="edit.form" :rules="edit.rules" ref="edit_form" label-position="right" size="small" label-width="140px" class="billing-order-edit-form">
<!--        <el-form-item label="名称" prop="title">-->
<!--          <el-input v-model="edit.form.title"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="商家" prop="merchant_id">
          <el-select v-model="edit.form.merchant_id" placeholder="请选择活动区域">
            <el-option v-for="(item, index) in  dic.merchant" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算金额" class="input-with-select">
          <el-input v-model="edit.form.amount" :clearable="false">
            <el-select slot="prepend" v-model="edit.form.pay_type" placeholder="结算方式" :clearable="false">
              <el-option label="线上" value="8"></el-option>
              <el-option label="线下" value="10"></el-option>
            </el-select>
          </el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="edit.form.remark" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker v-model="edit.form.cycle_arr" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-divider><!--分隔符--></el-divider>
        <el-form-item label="订单支付数">
          <el-input v-model="edit.form.order_total_number" placeholder="0" @input="$tool.inputInteger(edit.form, 'order_total_number', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单完成数">
          <el-input v-model="edit.form.order_finish_number" placeholder="0" @input="$tool.inputInteger(edit.form, 'order_finish_number', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单历史退款数">
          <el-input v-model="edit.form.order_refund_history_number" placeholder="0" @input="$tool.inputInteger(edit.form, 'order_refund_history_number', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单支付额">
          <el-input v-model="edit.form.order_total_amount" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_total_amount', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单完成额">
          <el-input v-model="edit.form.order_finish_amount" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_finish_amount', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单历史退款额">
          <el-input v-model="edit.form.order_refund_history_amount" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_refund_history_amount', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单退款数">
          <el-input v-model="edit.form.order_refund_number" placeholder="0" @input="$tool.inputInteger(edit.form, 'order_refund_number', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单完成获利">
          <el-input v-model="edit.form.order_finish_profit" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_finish_profit', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单历史退款获利">
          <el-input v-model="edit.form.order_refund_history_profit" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_refund_history_profit', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单退款额">
          <el-input v-model="edit.form.order_refund_amount" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_refund_amount', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单完成已结">
          <el-input v-model="edit.form.order_finish_cleared" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_finish_cleared', $event)"></el-input>
        </el-form-item>
        <el-form-item label="订单历史退款已结">
          <el-input v-model="edit.form.order_refund_history_cleared" placeholder="0.00" @input="$tool.inputAmount(edit.form, 'order_refund_history_cleared', $event)"></el-input>
        </el-form-item>
        <el-form-item class="buttonBox">
          <el-button type="primary" @click="editSubmit">提交</el-button>
          <el-button @click="editBox(false)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "IotBillingDetail",
  props:{
    request:{
      id:Number,
    }
  },
  data(){
    return{
      user:{},
      dic:{
        status:[],
        merchant:[],
      },
      detail: {},
      fields:[
        {"key":"order_total_number", "format":2},
        {"key":"order_total_amount", "format":3},
        {"key":"order_finish_number", "format":2},
        {"key":"order_finish_amount", "format":3},
        {"key":"order_finish_profit", "format":3},
        {"key":"order_finish_cleared", "format":3},
        {"key":"order_refund_number", "format":2},
        {"key":"order_refund_amount", "format":3},
        {"key":"order_refund_history_number", "format":2},
        {"key":"order_refund_history_amount", "format":3},
        {"key":"order_refund_history_profit", "format":3},
        {"key":"order_refund_history_cleared", "format":3},
        {"key":"amount", "format":3},
        {"key": "pay_type", "format":2}
      ],
      edit:{
        show:false,
        form:{
          // title:'',
          merchant_id: '',
        },
        rules:{
          // title: [{required: true, message: '请输入账单名称', trigger: 'blur' }],
          merchant_id: [{required: true, message: '请选择商家', trigger: 'change' }],
        },
      }
    }
  },
  mounted(){
    this.getDetail()
    this.getDic()
    this.user = this.$tool.getUser()
  },
  methods:{
    getDetail(){
      if (!this.request.id){
        return
      }
      this.$api.order.billingDetail({id:this.request.id}, res=>{
        if (!res.status) {
          return this.$message.error(res.message)
        }
        this.fields.forEach(function (item){
          if (item.format == 3){
            // console.log(item.key, data[item.key])
            // console.log("   ",(data[item.key]??0).toFixed(2))
            res.data[item.key] = (res.data[item.key]?? 0).toFixed(2)
          }
        })
        this.detail = res.data
      })
    },
    editBox(show=true){
      this.edit.show = show
      if (this.edit.show){
        let data = this.$tool.copyJSON(this.detail)
        data.pay_type = data.pay_type.toString()
        data.cycle_arr = [data.start_dt, data.end_dt];
        this.edit.form = data
      }else {
        this.edit.form = {}
        this.$refs['edit_form'].resetFields()
      }
    },
    editSubmit(){
      this.$refs['edit_form'].validate((valid) => {
        if (!valid) {
          return false
        }
        let body = this.$tool.copyJSON(this.edit.form)
        body.start_dt = body.cycle_arr[0]
        body.end_dt = body.cycle_arr[1]
        this.fields.forEach(function (item){
          if (item.format == 2){
            body[item.key] = Number(body[item.key])
          }else if (item.format == 3){
            body[item.key] = Number(body[item.key])
          }
        })

        this.$api.order.billingEdit(body, res=>{
          if (!res.status){
            return this.$message.error(res.message)
          }
          this.$message.success('修改成功.')
          this.getDetail()
          this.editBox(false)
        })
      })
    },
    // 状态操作
    changeStatus(new_status){
      switch (new_status){
        case this.Enum.StatusWait:
          this.$confirm('确定立即提交审核吗？', '系统提示').then(()=>{
            this.$api.order.billingChangeStatus({id:this.detail.id, status:new_status}, res=>{
              if (!res.status){
                return this.$message.error(res.message)
              }
              this.getDetail()
              this.$message.success('操作成功！')
            })
          })
          break
        case this.Enum.StatusDisable:
          this.$prompt('请输入驳回说明', '系统提示').then(({value})=>{
            this.$api.order.billingChangeStatus({id:this.detail.id, status:new_status, remark:value}, res=>{
              if (!res.status){
                return this.$message.error(res.message)
              }
              this.getDetail()
              this.$message.success('操作成功！')
            })
          })
          break
        case this.Enum.StatusActive:
          this.$api.order.billingChangeStatus({id:this.detail.id, status:new_status}, res=>{
            if (!res.status){
              return this.$message.error(res.message)
            }
            this.getDetail()
            this.$message.success('操作成功！')
          })
          break
        default:
          return
      }
    },
    getDic(){
      let types = [
        this.$api.Enum.DicTypeResellerList,
        this.$api.Enum.DicOrderStatus,
      ]
      this.$api.foundation.dicListExtendCache(types, {}, res => {
            this.dic.status = res[this.$api.Enum.DicOrderStatus];
            this.dic.merchant = res[this.$api.Enum.DicTypeResellerList];
          }
      );
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  .info{
    overflow: hidden;
    white-space: nowrap;
  }
  .info>span{
    margin-right: 20px;
  }
  b{
    font-size: 13px;
    //font-weight: 400;
    color: #9f9f9f;
  }

  .buttonBox {
    display: flex;
  }
}
.buttonBox{
  margin-left: 20px;
}
.billing-order-edit-form{
  .el-input-group--prepend{
    width: 210px;
  }
  .el-date-editor{
    width: 577px;
  }
}
</style>
<!--
单号	状态

名称	备注	结算金额
商家	账期	付款方式

订单支付数	订单完成数	历史退款数
订单支付额	订单完成额	历史退款额
订单退款数	订单完成获利	历史退款获利
订单退款额	订单完成已结	历史退款已结
-->